<template>
  <div class="iot_HomePage">
    <div class="iot_banner">
        <BannerPage></BannerPage>
    </div>
    <div class="iot_category">
      <div v-for="item in CategoryImg" :key="item.id" class="iot_cell">
      <img :src="item.icon" alt="">
      <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="iot_goodsLike">
      <div class="iot_title"><img src="../assets/icons/logo/bubble.png" alt="">猜你喜欢<img src="../assets/icons/logo/bubble.png" alt=""></div>
      <div class="iot_page">
        <GoodsCell v-for="items in GuessPage" 
        :key="items.id" 
        :src="items.picture" 
        :id="items.id"
        :Name="items.name"
        :price="items.price"></GoodsCell>
      </div>
    </div>
    <div class="iot_loading">正在加载……</div>
  </div>
</template>

<script>
import { inject } from 'vue';
import BannerPage from './BannerPage.vue';
import GoodsCell from './GoodsCell.vue';
export default {
    name:'HomePage',
    components:{
        BannerPage,
        GoodsCell
    },
    setup(){
      //前台分类
      const CategoryImg = inject('CategoryImg');
      //猜你喜欢
      let Goods = inject('Goods')
      let GuessPage = Goods[0]
      console.log(Goods[0])
      return {CategoryImg,GuessPage}
    }
}
</script>

<style scoped>
      .iot_banner{
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
    .iot_category{
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
    }
    .iot_category img{
      width: 70px;
      margin: 10px 37px 0;
    }
    .iot_cell{
      display: flex;
      flex-direction: column;
      align-content: center;
    }
    .iot_title{
      background-color: #fff;
      margin: 10px 0;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #27ba9b;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .iot_title img {
          width: 15px;
          height: 15px;
          margin: 10px;
      }
      .iot_page{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
      }
      .iot_loading{
        text-align: center;
        margin: 10px 0;
      }
</style>